<template>
  <el-form-item class="Xmf-diagonsis-select" label="诊断：">
    <xm-remote-select
      type="icd"
      v-model="d.sel"
      :itemList="d.itemList"
      @loadData="dtLoad"
      @seachData="seachData"
      :isMultiple="true"
      :isFilterable="true"
      @change="change"
      :style="{ width: $slots.default ? '85%' : '100%' }"
    ></xm-remote-select>
    <span :style="{ width: $slots.default ? '15%' : '0%' }">
      <slot />
    </span>
  </el-form-item>
</template>
<script>
  import { reactive } from '@vue/reactivity'
  import XmRemoteSelect from 'XMC/XmRemoteSelect'
  import { computed } from '@vue/runtime-core'
  import { loadIdc } from '@/api/modules/emr'
  export default {
    name: 'XmFDiagnosisSelect',
    components: { XmRemoteSelect },
    props: { modelValue: Array },
    setup(props, context) {
      const d = reactive({ itemList: [] })

      d.sel = computed({
        set(val) {
          context.emit('update:modelValue', val)
        },
        get() {
          return props.modelValue
        },
      })
      const dtLoad = async function (cb) {
        d.itemList = [
          // { value: '心火上炎证(ZZXU20)', label: '心火上炎证(ZZXU20)' },
          // { value: '心脾积热，循经上炎证(ZZXP41)', label: '心脾积热，循经上炎证(ZZXP41)' },
          // { value: '相火上炎证(ZZSU30)', label: '相火上炎证(ZZSU30)' },
        ]
        cb()
      }
      const seachData = async function (item) {
        // console.log('item =' + JSON.stringify(item))
        if (!item.val) return
        const params = item.val ? { name: item.val } : {}
        const res = await loadIdc(params)
        d.itemList = res.data
      }
      const change = function () {
        // context.emit('update:modelValue', d.sel)
      }
      return {
        dtLoad,
        d,
        change,
        seachData,
      }
    },
  }
</script>
<style lang="scss">
  .Xmf-diagonsis-select {
    .el-form-item__content {
      display: flex;
    }
  }
</style>
